<template>
  <div class="container">
      <nav-bar :title="realTitle" :styles="style"></nav-bar>
      <div class="wrapper">
          <div class="content">
            <swiper :options="swiperOption">
                <swiper-slide v-for="(item, index) in goodsPics" :key="index"><img class="swiper-img" :src="item"></swiper-slide>
            </swiper>   
          </div>
      </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import api from '../../utils/api.js'
// import NavBar from '../../components/NavBar'
export default {
    name: 'GoodDetails',
    components:{
        // NavBar,
        swiper,
        swiperSlide
    },
    data() {
        return {
            id: 0,
            realTitle: '商品详情',
            style: {
                background: '#fff',
                color: '#030303'
            },
            swiperOption: {//swiper3
                autoplay: 3000,
                speed: 1000,
            },
            goodsPics: []
        }
    },
    methods: {
        getGoodDetails() {
            let id = this.$route.query.id;
            console.log(id)
            api.getGoodDetails(id)
            .then( res => {
                console.log(res)
                this.goodsPics = res.goodsPics.split(',')
            })
        }
    },
    watch: {
        '$route': 'getGoodDetails'
    },
    created() {
        this.getGoodDetails();
    }
}

</script>
<style>
.swiper-img {
    height: 3.75rem;
    width: 3.75rem;
}
</style>